<template>
	<view class="page-wrapper">
		<CommonTitle title="填报" @handleInfoSuccess="handleCommonInfoSuccess"></CommonTitle>
		<!-- 过境客流 -->
		<view
			class="form-wrap"
			:style="{
				height: `calc(100% - ${titleHeight}px)`
			}"
		>
			<view class="form-content">
				<!-- 标题 -->
				<view class="title-box">
					<text>过夜人数</text>
					<text>请准确填写单位、人数和日期信息</text>
				</view>
				<!-- 表单信息 -->
				<up-form
					label-position="top"
					:model="form"
					:rules="rules"
					labelWidth="200rpx"
					:labelStyle="{ fontSize: '28rpx', marginBottom: '24rpx', color: '#fff' }"
					ref="formRef"
				>
					<up-form-item label="填报单位" prop="units" :borderBottom="false">
						<uni-data-select
							class="common-form-box"
							placeholder="请输入你的单位"
							v-model="form.units"
							:localdata="unitArr"
						></uni-data-select>
					</up-form-item>
					<up-form-item
						class="gyrs-form-item"
						label="过夜人数"
						prop="maleNum"
						:border-bottom="false"
					>
						<!-- 男 -->
						<view class="male-box">
							<view class="male-text">男</view>
							<up-input
								class="common-input"
								placeholder="请输入内容"
								border="surround"
								type="number"
								color="#fff"
								v-model="form.maleNum"
							></up-input>
						</view>
						<!-- 女 -->
						<view class="female-box">
							<view class="female-text">女</view>
							<up-input
								class="common-input"
								placeholder="请输入内容"
								border="surround"
								type="number"
								color="#fff"
								v-model="form.femaleNum"
							></up-input>
						</view>
					</up-form-item>
					<up-form-item label="总人数" :border-bottom="false">
						<view class="total-num">{{ personNum }}人</view>
					</up-form-item>
					<up-form-item label="入住日期" prop="date" :border-bottom="false">
						<up-datetime-picker
							class="common-date"
							hasInput
							:show="dateTimeShow"
							v-model="form.date"
							mode="date"
							:formatter="formatter"
						></up-datetime-picker>
					</up-form-item>
				</up-form>

				<!-- 提交 -->
				<up-button class="submit-box" text="提交登记" shape="circle" @click="handleSubmitClick" />
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from 'vue';
import { getRecordBusUnit } from '../../api/dataScreenBig/record';

// 标题组件加载完毕
const titleHeight = ref(0);
const handleCommonInfoSuccess = (info) => {
	titleHeight.value = info.titleBoxHeight;
};
// 单位数据
const unitArr = ref([])
const getBusUnitAsync = async () => {
	const res = await getRecordBusUnit()
	if (res.code !== 200) return
	unitArr.value = res.data
}
onMounted(() => {
	getBusUnitAsync()
})
// 
const rules = {
	'userInfo.name': {
		type: 'string',
		required: true,
		message: '请填写姓名',
		trigger: ['blur', 'change']
	},
	units: {
		type: 'string',
		require: true,
		message: '请选择单位',
		trigger: ['blur', 'change']
	}
};
const formRef = ref(null);
// 总人数
const personNum = computed(() => {
	return Number(form.maleNum) + Number(form.femaleNum);
});
const form = reactive({
	units: 1,
	maleNum: 0,
	femaleNum: 0,
	date: Date.now()
});
// 日期控件
const dateTimeShow = ref(false);
const formatter = (type, value) => {
	if (type === 'year') {
		return `${value}年`;
	}
	if (type === 'month') {
		return `${value}月`;
	}
	if (type === 'day') {
		return `${value}日`;
	}
	return value;
};
const handleSubmitClick = async () => {
	if (!form.units) return uni.showToast({
		icon: 'none',
		title: '请填入填报单位!'
	})
	
	if (Object.is(Number(form.maleNum), NaN)) return uni.showToast({
		icon: 'none',
		title: '过夜人数男，请填写数字!'
	})
	
	if (Object.is(Number(form.femaleNum), NaN)) return uni.showToast({
		icon: 'none',
		title: '过夜人数女，请填写数字!'
	})
	console.log('提交的数据', form)
};
</script>

<style lang="scss" scoped>
// 通用表单样式
.common-form-box {
}

::v-deep(.u-input) {
	&.common-input {
		background: rgba(17, 45, 109, 0.55) !important;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		border: 2rpx solid #12b4f9 !important;
	}
}

// ::v-deep (.u-input__content__field-wrapper__field) {
// 	color: #fff;
// }

// 下拉选择框
::v-deep(.uni-stat__select) {
	.uni-stat-box {
		background: rgba(17, 45, 109, 0.55);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		border: 2rpx solid #12b4f9;

		.uni-select {
			border: 0;
		}

		.uni-select__input-text {
			font-size: 28rpx;
			color: #fff;
		}

		.uni-select__input-placeholder {
			color: #d6d6d6;
		}
	}
}

.male-box,
.female-box {
	.u-input {
		background: rgba(17, 45, 109, 0.55);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		border: 2rpx solid #12b4f9;
	}
}

.form-wrap {
	width: 100%;
	padding: 30rpx 30rpx 36rpx 30rpx;

	.form-content {
		position: relative;
		padding: 0 46rpx 82rpx 46rpx;
		width: 100%;
		height: 100%;
		background: #104993;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		overflow-y: auto;

		.title-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 160rpx;

			text:nth-child(1) {
				color: #fff;
				font-weight: 500;
				font-size: 32rpx;
			}

			text:nth-child(2) {
				margin-top: 20rpx;
				font-weight: 300;
				font-size: 20rpx;
				color: #d6d6d6;
				text-align: left;
			}
		}

		.male-box {
			margin-right: 42rpx;
			.male-text {
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				margin-bottom: 16rpx;
			}
		}

		.female-box {
			.female-text {
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				margin-bottom: 16rpx;
			}
		}

		.total-num {
			width: 100%;
			text-align: center;
			font-weight: bold;
			color: #fff;
			font-size: 44rpx;
		}

		.submit-box {
			margin-top: 100rpx;
			width: 598rpx;
			height: 92rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #ffffff;
			background: #1985ff;
			border-radius: 46rpx 46rpx 46rpx 46rpx;
		}

		// form-item 样式定义
		::v-deep(.u-form-item) {
			.u-form-item__body {
				padding: 0 0 64rpx 0;
			}

			&.gyrs-form-item {
				.u-form-item__bod {
					padding: 0 0 40rpx 0;
				}
			}

			.u-datetime-picker {
				.u-input__content__field-wrapper__field {
					font-size: 28rpx !important;
					color: #fff !important;
				}
			}
		}
	}
}
</style>
